<template>
  <div class="login-box">
    <header>
      <a href="#">
        <img class="avg-header" src="@/assets/images/logo.png" />
      </a>
    </header>
    <div class="main">
      <div class="title">
        <h1>用户登录</h1>
      </div>
      <div class="form-box">
        <el-form
          label-position="top"
          label-width="auto"
          :rules="rules"
          :model="formInfo"
          ref="formInfoRef"
        >
          <el-form-item label="账号 Email" prop="email">
            <el-input type="email" v-model="formInfo.email" placeholder="example@mail.com" />
            <template #error>
              <div class="form-error" style>
                <el-icon :size="24" color="#e65442">
                  <Warning />
                </el-icon>
                <span>{{ message1 }}</span>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formInfo.password" placeholder="8-16位英数混合，允许特殊符号，区分大小写" />
            <template #error>
              <div class="form-error" style>
                <el-icon :size="24" color="#e65442">
                  <Warning />
                </el-icon>
                <span>{{ message2 }}</span>
              </div>
            </template>
          </el-form-item>
          <p class="forget">
            <a href="/ForgetWord">忘记密码？</a>
          </p>
        </el-form>
      </div>
      <div class="btn">
        <el-button type="danger" round @click="submitForm(formInfoRef)">登录</el-button>
      </div>
      <div class="tips">
        <span>还未注册 本网站 账号？</span>
        <router-link to="/register">立即注册</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { setToken, } from "@/utils/auth";
import { reactive, ref } from "vue";
import { login } from "@/api/login";
import { Search, Warning } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

const formInfoRef = ref(null);
const formInfo = reactive({
  email: "18725519631@139.com",
  password: "wx123456"
});

const message1 = ref(null);
const validateAccount = (rule, value, callback) => {
  const regEmail = /^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/;
  if (value === "") {
    message1.value = "账号不可为空";
    callback(new Error("账号不可为空"));
  } else {
    if (!regEmail.test(value.trim())) {
      message1.value = "账号格式错误或无法使用";
      callback(new Error("账号格式错误或无法使用"));
    } else {
      callback();
    }
  }
};

const message2 = ref(null);
const validatePass = (rule, value, callback) => {
  const regPass = /^[a-zA-Z0-9]{8,}$/;
  if (value === "") {
    message2.value = "密码不可为空";
    callback(new Error("密码不可为空"));
  } else {
    if (!regPass.test(value.trim())) {
      message2.value = "8-16位英数混合，允许特殊符号，区分大小写";
      callback(new Error("8-16位英数混合，允许特殊符号，区分大小写"));
    } else {
      callback();
    }
  }
};

const rules = reactive({
  email: [
    {
      required: true,
      trigger: "blur",
      validator: validateAccount
    }
  ],
  password: [
    {
      required: true,
      trigger: "blur",
      validator: validatePass
    }
  ]
});

const submitForm = async formEl => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await login(formInfo);
      if (res.code == 200) {
        setToken(res.data.token);
        router.push("/");
      }
    }
  });
};
</script>

<style lang="scss" scoped>
header {
  position: sticky;
  top: 0em;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  height: 4rem;
  z-index: 30;
  background: #ffffff;
  display: flex;
  align-items: center;
}

.main {
  width: 100%;
  margin: 0 auto;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 4rem;
  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    h1 {
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 4rem;
      letter-spacing: 0.05em;
      color: #1a202c;
      padding: 1rem;
      height: 4rem;
    }
  }
  .form-box {
    margin-top: 2rem;
    :deep(.el-form-item__label) {
      height: 4rem;
      line-height: 4rem;
      margin-bottom: 0;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: #1a202c;
    }
    :deep(.el-input) {
      display: flex;
      width: 100%;
      height: 3.5rem;
    }
    :deep(.el-input__wrapper) {
      background-color: #f7fafc;
      &.is-focus {
        box-shadow: 0 0 0 1px var(--theme-ui-colors-primary) inset;
      }
    }
    .forget {
      display: flex;
      align-items: center;
      justify-content: end;
      height: 3rem;
      margin-bottom: 2rem;
      a {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #ff8674;
      }
    }
    .form-error {
      margin: 1rem 0px 0px;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.05em;
      color: #2d3748;
      display: flex;
      align-items: center;
      border-radius: 0.25rem;
      background-color: #fff4f2;
      padding: 1rem;
      gap: 0.5rem;
      box-shadow: none;
      width: 100%;
      span {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 2;
        letter-spacing: 0.05em;
        color: #e65442;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    :deep(.el-button) {
      width: 100%;
      max-width: 16rem;
      padding: 0 1rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 50rem;
      background-color:#feaa9e;
    }
  }
  .tips {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.05em;
    span {
      color: #718096;
    }
    a {
      color: #ff8674;
    }
  }
}

.avg-header {
  width: 35px;
}
</style>